<template>
    <div class="box" >
        <ItemList v-for="(item, index) in pageTree[type.list]" :key="index" v-sdrag:real="{id: item.id, com: item.id, type: type.list}">
        </ItemList>
        <m-header v-for="(item, index) in pageTree[type.header]" :key="index" v-sdrag:real="{id: item.id, com: item.id, type: type.header}">
        </m-header>
    </div>
</template>

<script>
    import ItemList from "./ItemList";
    import Header from "./Header";
    import { mapGetters } from "vuex";
    import { getPageTree, initDomTree } from "../../utils/getPageTree";
    export default {
        name: 'hello',
        data() {
            return {
                page: "confirmgoodsinfo",
                type: {
                    list: "list",
                    header: "header"
                }
            }
        },
        computed: {
            ...mapGetters([
                "getDomTree"
            ]),
            pageTree() {
                return getPageTree(this, this.page);
            }
        },
        components: {
            ItemList,
            "m-header": Header,
        },
        created() {

        },
        mounted() {
            console.log("this.getDomTree[this.page]", this.getDomTree[this.page])
            initDomTree(this.getDomTree[this.page]);

        },
        updated() {
            //页面更新完毕
            console.log("页面更新完毕");
            initDomTree(this.getDomTree[this.page]);
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .box {
        /* display: flex; */
    }
</style>